<template>
  <el-dialog
    title="添加产品"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
  >
    <div class="device-create-form">
      <el-form
        label-width="200px"
        :inline="true"
        :model="createForm"
        ref="createForm"
        :show-message="false"
      >
        <el-form-item
          label="设备出厂ID号"
          prop="serialNumber"
          required
        >
          <el-input
            v-model="createForm.serialNumber"
            placeholder="请输入设备出厂ID号"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="产品类型"
          required
          prop="typeUuid"
        >
          <el-select
            v-model="createForm.typeUuid"
            filterable
            remote
            reserve-keyword
            placeholder="请选择产品类型"
            :remote-method="remoteDeviceTypeSearch"
            :loading="remoteLoading"
            @change="productTypeChange"
          >
            <el-option
              v-for="deviceType in deviceTypeList"
              :key="deviceType.uuid"
              :label="deviceType.name"
              :value="deviceType.uuid"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="绑定升级包"
          prop="packageId"
        >
          <el-select
            clearable
            v-model="createForm.packageId"
            filterable
            remote
            reserve-keyword
            placeholder="请选择升级包"
            :remote-method="remotePackageSearch"
            :loading="remoteLoading"
          >
            <el-option
              v-for="packagee in packageList"
              :key="packagee.id"
              :label="packagee.name"
              :value="packagee.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="绑定配置参数"
          prop="settingId"
        >
          <!-- <el-input
            v-model="createForm.settingId"
            placeholder="请输入设置参数"
          ></el-input> -->
          <el-select
            clearable
            v-model="createForm.settingId"
            filterable
            remote
            reserve-keyword
            placeholder="请选择产品配置参数"
            :remote-method="remoteSettingSearch"
            :loading="remoteLoading"
          >
            <el-option
              v-for="setting in settingList"
              :key="setting.id"
              :label="setting.name"
              :value="setting.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="备注"
          prop="description"
        >
          <el-input
            v-model="createForm.description"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button
        type="primary"
        @click="create"
        :loading="btnLoading"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { Message } from 'element-ui';
import { parseError } from '../../../utils';
import { queryDeviceSettingListApi } from '../../../api/deviceSetting';
import { createUpgradeDeviceApi } from '../../../api/upgradeDevice';
import { queryProductTypeListApi } from '../../../api/productType';
import { validateForm } from './service';
import { queryPackageListApi } from '../../../api/package';
import { parse } from 'uuid';

export default {
  name: 'AddDevice',
  data() {
    return {
      dialogVisible: false,
      btnLoading: false,
      remoteLoading: false,
      createForm: {
        typeUuid: '',
        name: '',
        serialNumber: '',
        description: '',
        packageId: null,
        settingId: null
      },
      deviceTypeList: [],
      packageList: [],
      settingList: []
    };
  },
  watch: {
    dialogVisible: {
      handler(value) {
        if (!value) this.$refs.createForm.resetFields();
      }
    }
  },
  methods: {
    productTypeChange() {
      this.remotePackageSearch();
      this.remoteSettingSearch();
    },
    showDialog() {
      this.remoteDeviceTypeSearch();
      this.remotePackageSearch();
      this.remoteSettingSearch();
      this.dialogVisible = true;
    },
    create() {
      // const validError = validateForm(this.createForm);
      // if (validError) return Message.warning(validError);
      const validError = validateForm(this.createForm);
      if (validError) return Message.warning(validError);
      this.btnLoading = true;
      createUpgradeDeviceApi(
        this.createForm.typeUuid,
        this.createForm.name,
        this.createForm.serialNumber,
        this.createForm.description,
        this.createForm.packageId,
        this.createForm.settingId
      )
        .then(res => {
          Message.success('成功创建产品');
          this.dialogVisible = false;
          this.$emit('refresh');
        })
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.btnLoading = false));
    },
    remoteDeviceTypeSearch(query) {
      this.remoteLoading = true;
      queryProductTypeListApi(query, 100)
        .then(deviceTypeList => (this.deviceTypeList = deviceTypeList))
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.remoteLoading = false));
    },
    remotePackageSearch(query) {
      this.remoteLoading = true;
      queryPackageListApi(query, 100, this.createForm.typeUuid)
        .then(packageList => {
          this.packageList = packageList.map(item => {
            return {
              name: item.name + '（' + item.version + '）',
              id: item.id
            };
          });
        })
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.remoteLoading = false));
    },
    remoteSettingSearch(query) {
      this.remoteLoading = true;
      queryDeviceSettingListApi(query, 100, this.createForm.typeUuid)
        .then(settingList => {
          this.settingList = settingList.map(item => {
            return {
              name: item.name + '（' + item.version + '）',
              id: item.id
            };
          });
        })
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.remoteLoading = false));
    }
  }
};
</script>

<style lang="scss" scoped>
.local-name {
  padding: 20px 20px 10px 20px;
  font-size: 24px;
  font-weight: 800;
  .el-button--primary {
    float: right;
    background-color: #2c83b1 !important;
    border-color: #2c83b1 !important;
  }
}
.device-create-form {
  background: #fff;
  width: auto;
  margin: 10px;
  padding: 15px;
  .paging-footer {
    padding: 15px 0;
  }
  .el-input {
    width: 300px;
  }
  .el-select {
    width: 300px;
  }
  .el-form-item {
    margin-right: 20px;
  }
}
</style>
